<template>
  <div class="jade-wrap">
    <transition name="qrcode-transition" enter-active-class="showUp" leave-active-class="hideDown">
      <qrcode v-if="show" :wenwu="wenwu" @closeorder="getorder"></qrcode>
    </transition>
    <div id="pano" style="width:100%;height:100%;">
      <noscript>
        <table style="width:100%;height:100%;">
          <tr style="vertical-align:middle;">
            <td>
              <div style="text-align:center;">
                ERROR:
                <br />
                <br />Javascript not activated
                <br />
                <br />
              </div>
            </td>
          </tr>
        </table>
      </noscript>
    </div>
  </div>
</template>

<script>
import { getHotspot } from "../api";

// import Krapno from "../utils/krpano/Krpano";
import Qrcode from "../components/Qrcode";
var krpano = null; 
 function krpano_onready_callback (krpano_interface) {
  krpano = krpano_interface;
}


export default {
  name: "Jade",
  components: {
    Qrcode
  },
  data() {
    return {
      wenwu: {
        title: "",
        content: "",
        imgUrl:""
      },
      show: false,
      option: {
        //   swf: "../../static/krpano/tour.swf",
        swf: "../../static/krpano/tour.swf", // path to flash viewer (use null if no flash fallback will be requiered)
        id: "krpanoSWFObject",
        // xml: "../../static/krpano/tour.xml",
        xml: "../../static/krpano/tour.xml",
        target: "pano",
        mobilescale: 1.0,
        html5: "auto",
        onready: krpano_onready_callback,
        consolelog: true, // trace krpano messages also to the browser console
        passQueryParameters: true // pass query parameters of the url to krpano
        
      }
    };
  },
  mounted: function() {
     this.getHotspots(1, 3);
    //  krpano.call('set("layer[map].visible", false)')
    localStorage.removeItem("hotspot");
    setInterval(() => {
      if (localStorage.getItem("hotspot")) {
        this.show = true;
        let flag = 0;
        if (this.wenwu.title == "") {
          this.getHotspots(1, 3);
        }
      }
    }, 300);
 
    // krapno.render(this.option);
    // console.log(krapno);
    embedpano({
      swf: "../static/krpano/tour.swf",
      xml: "../static/krpano/tour.xml",
      target: "pano",
      html5: "auto",
      mobilescale: 1.0,
      passQueryParameters: true,
      onready: krpano_onready_callback
    });
  },
  methods: {
    getorder(msg) {
      this.show = msg;
      localStorage.removeItem("hotspot");
      //  this.$store.dispatch('changeType',"hhh")
      //  console.log(this.$store.getters.hotspot)
    },
    async getHotspots(currentPage, pageSize) {
      const dataTest= await getHotspot({
        pageNum: currentPage,
        pageSize: pageSize
      });

      krpano.call('set(hotspot[spot_0_2].title,'+dataTest.data.message+')')
      krpano.call('set(hotspot[spot_0_3].title,'+dataTest.data.message+')')
      var srcsource='http://www.lauray.top/img/111111111111.MP3'
      krpano.call("playsound(bgsnd,"+srcsource+ ", 0))")
      const result = await getHotspot({
        pageNum: currentPage,
        pageSize: pageSize
      });
      if (result.data.status === 200) {
        this.wenwu.title = result.data.message;
        this.wenwu.content = result.data.status;
      }
      
    }
  },
}
</script>

<style lang="scss" scoped>
 @import "../../static/styles/mixin.scss";
.jade-wrap {
  width: 100%;
  height: 100%;
  .img_btn {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 10px;
    right: 6px;
    z-index: 4010;
  }
  .showUp {
    animation: showup 0.4s ease-in;
  }
  .hideDown {
    animation: hidedown 0.4s ease-out;
  }

  @keyframes showup {
    from {
      transform: translateY(110%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes hidedown {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(110%);
    }
  }
}
</style>
